<template>
		<!-- 排行榜  -->
		<div class="goods-block">
			<div class="phb">排行榜</div>
			<van-row type="flex" justify="center" style="margin-top: 0.5rem;">
				<van-col span="7" class="goods_item" v-for="(item,i) in productItems" :key="i" @click="onDetail(item.product_id)" style="border: 0;">
					<van-image :src="APIDomainName + item.pic" radius="2rem"></van-image>
					<div class="van-ellipsis" style="font-weight: bold;font-size: 18px;margin-top: 0.5rem;">{{item.title}}</div>
					<div class="price">￥{{item.price.toFixed(2)}}</div>
				</van-col>
			</van-row>
		
		</div>

</template>

<script>
	export default {
		name: 'homeProduct',
		props: {
			productItems:Array,
			title :String,
			// newArrialItems:Array,
			// topSaleItems:Array,
		},
		methods: {
			onDetail(id) {
				this.$router.push({
					name: 'productDetail',
					params: {
						id
					},
				});
			},
		}
	}
</script>
<style lang="less" scoped>
	.goods-block {
		background-color: #ffffff;
		margin-top: 1rem;

		.phb {
			font-size: 24px;
			color: black;
			width: 40%;
			text-align:center;
			margin-left: -3rem;
			margin-top: 1rem;
			font-weight: bold;
		}

		.goods_item {
			display: flex;
			flex-direction: column;
			margin: 8px;
			padding: 5px;
			background-color: white;
			border-radius: 10px;
			font-size: 14px;
			border: 1px solid #d6d6d6;
			
			.van-ellipsis{
				text-align: center;
			}
			.price {
				font-size: 16px;
				color: #FF0000;
				font-weight: bold;
				text-align: center;
				padding-right: 10px;
			}

		}

	}
	
</style>
